@extends('home.layouts._center')
@push('css')
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/css')}}/index.css">
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/css')}}/ziy.css">
@endpush
@section('content')
    <div class="mod_main">
        <div class="jib_xinx_kuang">
            <div class="wt">
                <ul>
                    <li><a href="{{route('home.center.edit','inform')}}">会员信息</a></li>
                    <li class="dangq_hongx"><a href="{{route('home.center.edit','face')}}">设置头像</a></li>
                </ul>
            </div>
            <form action="{{route('home.center.updateInform',auth()->user())}}" method="post" id="edit-face">
                @csrf
                <input type="hidden" name="face">
                <div class="wd">
                    <div class="up_avater">
                        <div class="upload_main">
                             <div class="up-left">
                                 <a href="javascript:;" onclick="uploadIcon()" title="点击更换头像">
                                     <img src="{{auth()->user()->face}}" class="avatar-img rounded-circle" style="width: 200px;height:200px;margin-top: 50px" id="test1">
                                 </a>
                             </div>
                            <div class="up-right">
                                <p class="text-secondary small  mt-3">
                                    <br><br><br><br>
                                    <span style="color: red;">请点击左侧图片设置头像</span><br><br>
                                    <span style="color: red;">请上传200x200 大小的jpeg图片，展示效果最佳</span>
                                    <button type="submit" style="width: 80px;height: 50px;margin-top: 50px;">确定上传</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" href="{{asset('org/layui/css/layui.css')}}">
@endpush
@push('js')
    <script src="{{asset('org/layui/layui.js')}}"></script>
    <script>
        layui.use('upload', function(){
            var $ = layui.jquery
                ,upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: '{{route('common.upload.layuiUpload')}}'
                ,data:{
                    _token:'{{csrf_token()}}'
                }
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    // obj.preview(function(index, file, result){
                    //     $('#demo1').attr('src', result); //图片链接（base64）
                    // });
                }
                ,done: function(res){
                    //console.log(res)
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $('#test1').attr('src', res.data.src);
                    $("[name='face']").val(res.data.src);
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });


        });
    </script>
@endpush
